<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Тетрис</title>
    <link rel="shortcut icon" href="./src/assets/img/logo.svg" type="image/svg">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./src/assets/styles/layout.css">
</head>
<body>
<div class="container">
    <div class="game-wrapper">
        <div class="info-section">
            <span id="score">
                0
            </span>
        </div>
        <div class="board-section"></div>
        <div class="control-section">
            <div class="col">
                <div class="arrow-control">
                    <div></div>
                    <button class="btn" id="btn-up">
                        &#5123;
                    </button>
                    <div></div>
                    <button class="btn" id="btn-left">
                        &#5130;
                    </button>
                    <div></div>
                    <button class="btn" id="btn-right">
                        &#5125;
                    </button>
                    <div></div>
                    <button class="btn" id="btn-down">
                        &#5121;
                    </button>
                    <div></div>
                </div>
            </div>
            <div class="col">
                <button class="btn btn-large" id="btn-drop">
                    &#5121;
                </button>
            </div>
        </div>
        <div class="setting-section">
            <button class="btn" id="btn-pause">
                Pause
            </button>
        </div>
        <div class="menu-section">
            <div class="result">
                <h1>
                    Game over
                </h1>
                <p>
                    Score
                </p>
                <h1 id="result-score">
                    0
                </h1>
            </div>
            <button class="btn btn-width" id="btn-play">
                Play
            </button>
            <button class="btn btn-width" id="btn-new-game">
                New game
            </button>
        </div>
    </div>
</div>
<div class="how-to">
    <h3>
        Keyboard control
    </h3>
    <table>
        <tr>
            <td>
                <button class="btn keycap">
                    &#5130;
                </button>
            </td>
            <td>
                Move left
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn keycap">
                    &#5125;
                </button>
            </td>
            <td>
                Move right
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn keycap">
                    &#5121;
                </button>
            </td>
            <td>
                Move down
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn keycap">
                    &#5123;
                </button>
            </td>
            <td>
                Move rotate
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn keycap">
                    Space
                </button>
            </td>
            <td>
                Hard drop
            </td>
        </tr>
        <tr>
            <td>
                <button class="btn keycap">
                    p
                </button>
            </td>
            <td>
                Pause/Resume game
            </td>
        </tr>
    </table>
</div>
    <script src="./src/scripts/main.js"></script>
    <script src="./src/scripts/constant.js"></script>
    <script src="./src/scripts/app.js"></script>
</body>
</html>